<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="/js/vue2.js"></script>
    <link rel="stylesheet" href="/css/animate.css" />
    <link rel="stylesheet" href="/css/anli.css" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <div id="app">
      <div class="add">
        编号:<input v-model="count.id" v-myfocus v-color="'red'" type="text" />
        品牌名称:<input v-model="count.name" type="text" @keydown.enter="add" />
        <input @click="add" type="button" value="添加" />
      </div>
      <div class="add">
        品牌名称:
        <input v-model="search" type="text" placeholder="请输入搜索条件" />
      </div>
      <div>
        <table class="tb">
          <tbody>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创立时间</th>
              <th>操作</th>
            </tr>
            <!-- 遍历tr是遍历里面的每一个对象 -->
            <tr v-for="(item,index) in searchlist">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.time | timer }}</td>
              <td>
                <a @click="display(index)" href="javascript:void(0)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
        <transition enter-active-class="animated swing">
          <div class="model" v-show="isShow">
            <span @click="close">关闭</span>
            <input @click="sure" class="btn1" type="button" value="确认" />
            <input @click="cancel" class="btn2" type="button" value="取消" />
          </div>
        </transition>
      </div>
    </div>

    <script>
      // 利用自定义属性实现光标的自动聚焦
      Vue.directive("myfocus", {
        inserted(el, binding) {
          el.focus();
        }
      });
      Vue.directive("color", {
        inserted(el, binding) {
          el.style.color = binding.vaule;
        }
      });
      Vue.filter("timer", function(time, sa) {
        var date = new Date(time);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      });
      var vm = new Vue({
        el: "#app",
        data: {
          list: [
            { id: 1, name: "龙卷风", time: new Date() },
            { id: 2, name: "晴天", time: new Date() },
            { id: 3, name: "搁浅", time: new Date() }
          ],
          count: { id: "", name: "", time: new Date() },
          isShow: false,
          clickId: "",
          color: "red",
          search: ""
        },
        methods: {
          add() {
            // 点击按钮添加count这个对象
            this.list.push({ ...this.count });
            // 对输入的数据进行清空
            this.count = { id: "", name: "", time: new Date() };
          },
          display(index) {
            this.clickId = index;
            this.isShow = true;
          },
          sure() {
            this.list.splice(this.clickId, 1);
            this.isShow = false;
          },
          close() {
            this.isShow = false;
          },
          cancel() {
            this.isShow = false;
          }
        },
        computed: {
          searchlist() {
            return this.list.filter(
              item => item.name.indexOf(this.search) != -1
            );
          }
        }
      });
    </script>
  </body>
</html>
<!-- 确立思路: 1:遍历td动态生成list列表
          2:利用1+1思想实现新增
        3:根据索引的方法实现删除
         4:根据indexOf的方法实现搜索框 -->
